---
layout: base
---
<!--{% assign guides = site.data.guides %}-->
{% assign categories = site.data.categories %}

<section class="hero">
    <div class="hero-main container">
        <div class="row justify-content-between">
            <div class="hero-left col-9">
                <div class="hero-slogan">
                    <h1 class="hero-name mutiny">Guides</h1>
                    <span class="hero-description">Learn Mutiny chunk by chunk at your pace.</span>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="guides">

    {% for category in categories %}
    <section id="{{ category.name }}" class="category mb6">

        <div class="container">
            <div class="row justify-content-between">
                <div class="col">
                    <h2 class="category-name antialiased">{{ category.name }}</h2>
                </div>
                {% if forloop.first %}
                <div class="col">
                    <input class="form-control form-control-md" id="search" type="text" placeholder="Search..."/>
                </div>
                {% endif %}
            </div>
            <section id="{{ category.name }}-list" class="row">
                {% for guide in  category.guides %}
                {% assign actual = site.data.guides[guide] %}
                <div class="guide col-md-6" data-search="{ actual.title }} {{ actual.text }}">
                    {% if actual.url %}
                    <h5 class="guide-title"><i class="las la-chevron-right"></i> <a href="{{ actual.url | relative_url }}">{{ actual.title }}</a></h5>
                    {% else %}
                    <h5 class="guide-title"><i class="las la-chevron-right"></i> <a href="{{ site.baseurl }}/guides/{{ guide }}">{{ actual.title }}</a></h5>
                    {% endif %}
                    <p class="guide-description">{{ actual.text }}</p>
                    <p class="guide-labels">
                        {% for label in actual.labels %}
                        <span class="badge badge-light">{{ label }}</span>
                        {% endfor %}
                    </p>
                </div>
                {% endfor %}
            </section>
            {% if forloop.last == false %}
            <hr/>
            {% endif %}
        </div>
    </section>
    {% endfor %}
</div>


